<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  
  <title>express-router | H5教案</title>

  
  <meta name="author" content="John Doe">
  

  
  <meta name="description" content="express中间件和路由express中的路由下面的方法可以创建路由
12const express=require(&amp;quot;express&amp;quot;);const router=express.Router();
路由的处理router.js
12345678910111213141516">
  

  
  
  <meta name="keywords" content="">
  

  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta property="og:title" content="express-router"/>

  <meta property="og:site_name" content="H5教案"/>

  
  <meta property="og:image" content="/ericxie-book/favicon.ico"/>
  

  <link href="/ericxie-book/favicon.ico" rel="icon">
  <link rel="alternate" href="/ericxie-book/atom.xml" title="H5教案" type="application/atom+xml">
  <link rel="stylesheet" href="/ericxie-book/css/style.css" media="screen" type="text/css">
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
<div class="blog">
  <div class="content">

    <header>
  <div class="site-branding">
    <h1 class="site-title">
      <a href="/ericxie-book/">H5教案</a>
    </h1>
    <p class="site-description"></p>
  </div>
  <nav class="site-navigation">
    <ul>
      
    </ul>
  </nav>
</header>

    <main class="site-main posts-loop">
    <article>

  
    
    <h3 class="article-title"><span>express-router</span></h3>
    
  

  <div class="article-top-meta">
    <span class="posted-on">
      <a href="/ericxie-book/2021/01/27/express-router/" rel="bookmark">
        <time class="entry-date published" datetime="2021-01-27T12:02:20.000Z">
          2021-01-27
        </time>
      </a>
    </span>
  </div>


  

  <div class="article-content">
    <div class="entry">
      
        <h2 id="express中间件和路由"><a href="#express中间件和路由" class="headerlink" title="express中间件和路由"></a>express中间件和路由</h2><h3 id="express中的路由"><a href="#express中的路由" class="headerlink" title="express中的路由"></a>express中的路由</h3><p>下面的方法可以创建路由</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">const router=express.Router();</span><br></pre></td></tr></table></figure>
<h4 id="路由的处理"><a href="#路由的处理" class="headerlink" title="路由的处理"></a>路由的处理</h4><p>router.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">const express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">//路由中间件</span><br><span class="line">const router=express.Router();</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&quot;/index&quot;</span>,(req,res,next)=&gt;&#123;</span><br><span class="line">    res.json(req.query)</span><br><span class="line">&#125;);</span><br><span class="line">router.post(<span class="string">&quot;/index&quot;</span>,(req,res,next)=&gt;&#123;</span><br><span class="line">    const data=req.body;</span><br><span class="line">    res.send(data);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&quot;/api&quot;</span>,(req,res,next)=&gt;&#123;</span><br><span class="line">    res.send(<span class="string">&quot;api page&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">router.put(<span class="string">&quot;/index&quot;</span>,(req,res,next)=&gt;&#123;</span><br><span class="line">    const data=req.body;</span><br><span class="line">    res.send(data);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">module.exports=router;</span><br><span class="line">//最下面的这里需要导出这个路由</span><br></pre></td></tr></table></figure>
<p>server.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">const router=require(<span class="string">&quot;./router&quot;</span>);</span><br><span class="line">app.use(<span class="string">&quot;/&quot;</span>,router);</span><br></pre></td></tr></table></figure>
<p>当执行后，前端访问服务器时，会自动被路由router分配到不同的内容中进行处理</p>
<h3 id="express中间件"><a href="#express中间件" class="headerlink" title="express中间件"></a>express中间件</h3><p>在express中间件分为5种:1、自定义中间件，2、路由中间件，3、静态中间件，4、第三方中间件，5、错误处理中间件</p>
<h4 id="自定义中间件"><a href="#自定义中间件" class="headerlink" title="自定义中间件"></a>自定义中间件</h4><p>下面案例中use就是中间件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">var express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">var app=express();</span><br><span class="line">app.use(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    res.set(&#123;</span><br><span class="line">        <span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>:<span class="string">&#x27;*&#x27;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    console.log(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br><span class="line">app.use(<span class="string">&quot;/&quot;</span>,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    console.log(<span class="string">&quot;b&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res)&#123;</span><br><span class="line">    res.jsonp(&#123;a:1,b:2&#125;);</span><br><span class="line">&#125;)</span><br><span class="line">app.listen(4001);</span><br></pre></td></tr></table></figure>
<p>也可以这么写</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">var express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">var app=express();</span><br><span class="line">app.use(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    res.set(&#123;</span><br><span class="line">        <span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>:<span class="string">&#x27;*&#x27;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    console.log(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    console.log(<span class="string">&quot;b&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    console.log(<span class="string">&quot;c&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res)&#123;</span><br><span class="line">    res.jsonp(&#123;a:1,b:2&#125;);</span><br><span class="line">&#125;)</span><br><span class="line">app.listen(4001);</span><br></pre></td></tr></table></figure>
<p>还可以这么写</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">var express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">var app=express();</span><br><span class="line">var listHandler=[<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    res.set(&#123;</span><br><span class="line">        <span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>:<span class="string">&#x27;*&#x27;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    console.log(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    console.log(<span class="string">&quot;b&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    console.log(<span class="string">&quot;c&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;]</span><br><span class="line">app.use(<span class="string">&quot;/a&quot;</span>,listHandler)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res)&#123;</span><br><span class="line">    res.jsonp(&#123;a:1,b:2&#125;);</span><br><span class="line">&#125;)</span><br><span class="line">app.listen(4001);</span><br></pre></td></tr></table></figure>
<p>也可以通过引入的方式使用</p>
<p>list.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const list=(req,res,next)=&gt;&#123;</span><br><span class="line">    <span class="built_in">let</span> data=Array(100).fill(1).map((item,index)=&gt;index+1)</span><br><span class="line">    res.send(data);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">exports.list=list;</span><br></pre></td></tr></table></figure>
<p>server.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">var app=express();</span><br><span class="line">var &#123;list&#125;=require(<span class="string">&quot;./list&quot;</span>)</span><br><span class="line">app.use(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    res.set(&#123;</span><br><span class="line">        <span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>:<span class="string">&#x27;*&#x27;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    console.log(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br><span class="line">app.use(<span class="string">&quot;/view&quot;</span>,list);</span><br></pre></td></tr></table></figure>
<h4 id="路由中间件"><a href="#路由中间件" class="headerlink" title="路由中间件"></a>路由中间件</h4><p>参照上方路由内容</p>
<h4 id="第三方中间件"><a href="#第三方中间件" class="headerlink" title="第三方中间件"></a>第三方中间件</h4><p>比如我们在前面使用过body-parser,这里也是中间件的使用</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">var express=require(<span class="string">&quot;express&quot;</span>);</span><br><span class="line">var app=express();</span><br><span class="line">const bodyParser=require(<span class="string">&quot;body-parser&quot;</span>);</span><br><span class="line"></span><br><span class="line">app.use(<span class="string">&quot;/&quot;</span>,<span class="keyword">function</span>(req,res,next)&#123;</span><br><span class="line">    res.set(&#123;<span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>:<span class="string">&#x27;*&#x27;</span>&#125;);</span><br><span class="line">    next();</span><br><span class="line">&#125;)</span><br><span class="line">// parse application/x-www-form-urlencode</span><br><span class="line">app.use(bodyParser.urlencoded(&#123;extended:<span class="literal">false</span>&#125;));</span><br><span class="line">// parse application/json</span><br><span class="line">app.use(bodyParser.json());</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&quot;/a&quot;</span>,<span class="keyword">function</span>(req,res)&#123;</span><br><span class="line">    console.log(req.body);</span><br><span class="line">    res.send(<span class="string">&quot;hello&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line">app.listen(4001);</span><br></pre></td></tr></table></figure>
<h4 id="内置中间件"><a href="#内置中间件" class="headerlink" title="内置中间件"></a>内置中间件</h4><p>在express中内置中间件仅有一个，就是静态处理，可以快速将静态文件返回给前端</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">app.use(express.static(<span class="string">&quot;./public&quot;</span>));</span><br></pre></td></tr></table></figure>
<p>在页面中如果设置静态目录为public文件夹下，那么通过路径访问的目录就是这个public目录下的所有文件和内容</p>
<p>前面我们有个node案例是创建站点静态目录，我们这里只需要一句话就可以完成</p>
<h4 id="错误处理中间件"><a href="#错误处理中间件" class="headerlink" title="错误处理中间件"></a>错误处理中间件</h4><p>错误处理中间件有 4 个参数，定义错误处理中间件时必须使用这 4 个参数。即使不需要 next 对象，也必须在签名中声明它，否则中间件会被识别为一个常规中间件，不能处理错误。</p>
<p>错误处理中间件和其他中间件定义类似，只是要使用 4 个参数，而不是 3 个，其签名如下： (err, req, res, next)。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">app.use(<span class="keyword">function</span>(err, req, res, next) &#123;</span><br><span class="line">  console.error(err.stack)</span><br><span class="line">  res.status(500).send(<span class="string">&#x27;Something broke!&#x27;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
      
    </div>

  </div>

  <div class="article-footer">
    <div class="article-meta pull-left">

    

    

    </div>

    
  </div>
</article>

  






    </main>

    <footer class="site-footer">
  <p class="site-info">
    Proudly powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and
    Theme by <a href="https://github.com/CodeDaraW/Hacker" target="_blank">Hacker</a>
    </br>
    
    &copy; 2021 John Doe
    
  </p>
</footer>
    
    
  </div>
</div>
</body>
</html>